<template>
  <div>
    <el-select
      v-model="selectAddress"
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :remote-method="remoteMethod"
      :loading="loading">
      <el-option
        v-for="item in options"
        :key="item"
        :label="item"
        :value="item">
      </el-option>
    </el-select>
<!--    <div id="myChart" :style="{width: '300px', height: '300px'}"></div>-->
    <OrdersNumber ref="OrdersNumber"></OrdersNumber>
  </div>
</template>

<script>
import OrdersNumber from './PanelTemplate'
export default {
  components: {
    OrdersNumber
  },
  name: 'RepairApplyEcharts',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      options: [],
      selectAddress: '',
      loading: false
    }
  },
  created () {
    this.drawLine()
  },
  methods: {
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        this.$axios.post(
          '/selectAddress',
          'fuzzySearch=' + query
        ).then(successResponse => {
          this.options = successResponse.data
        }).catch(failResponse => {
          this.$message.error('查询失败')
        })
        this.loading = false
      } else {
        this.options = []
      }
    },
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        backgroundColor: '#2b2c31',
        textStyle: {
          color: 'rgba(255, 255, 255, 0.3)'
        },
        title: { text: '在Vue中使用echarts' },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }]
      })
    }
  },
  watch: {
    selectAddress: function (newString, oldString) {
      this.$refs.PanelTemplate.drawLine()
      this.$message('click')
      if (newString === '') {
        return
      }
      this.$axios.post(
        '/selectRepairApplyDataByAddress', 'address=' + newString
      ).then(successResponse => {
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        myChart.setOption({
          title: { text: '在Vue中使用echarts' },
          tooltip: {},
          xAxis: {
            data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
          },
          yAxis: {},
          series: [{
            name: '销量',
            type: 'bar',
            data: [50, 200, 360, 100, 100, 200]
          }]
        })
      }).catch(failResponse => {
        this.$message.error('查询失败')
      })
    }
  }
}
</script>
<style scoped>

</style>
